<script setup>
const props = defineProps({
  list: Array
})

const toWorkInfo = (id)=>{
  uni.navigateTo({
  url: `/components/workInfo?workId=${id}`
});
}

</script>
<template>
  <!-- 单条我的评论 -->
<div class="single-card" v-for="(item, index) in list" :key="index" @click="toWorkInfo(item.workId)">
  <!-- 作品封面图片 -->
  <div class="img-box">
    <div class="work-img">
      <img
            :src="item.indexImg"
            style="max-width: 100%; max-height: 100%"/>
    </div>
  </div>
  <!-- 作品信息 -->
    <div class="work-text">
      <!-- 作品标题 -->
      <div class="work-title">
        <text>{{ item.workTitle }}</text>
      </div>
      <!-- 我的评论 -->
     <div class="my-comment">
      <text>{{ item.commentContent }}</text>
     </div>
     
    </div>
  <!-- 点赞数量 -->
  <div class="likes-num">
    <div class="like-icon">
      <uni-icons type="heart" size="25" color="#e5404f"></uni-icons>
    </div>
    <div class="like-num">
      <text>{{item.likeNum}}</text>
    </div>
  </div>
</div>
</template>
<style scoped lang="scss">
.single-card {
  overflow: hidden;
  margin: 5rpx 5rpx 5rpx 0rpx;
  width: 100%;
  height: 160rpx;
  background-color: #ffffff;
  display: flex;
  flex-direction: row; /* 水平排列 */
  border-radius: 10rpx;
}
.container {
  margin-top: 5rpx;
  display: flex;
  flex-direction: row;
  justify-content: center; 
  flex-wrap: wrap;
}
.work-img{
  height: 100rpx;
  width: 100rpx;
  margin-left: 20rpx;
}
.img-box{
  display: flex;
  /* justify-content: center; 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 20%;
  height: 100%;
}
.work-text{
  height: 100%;
  width: 65%;
}
.likes-num{
  display: flex;
  /* justify-content: center; 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 15%;
  height: 100%;
  flex-direction: column; /* 垂直排列 */
  justify-content: space-evenly;
}
.work-title{
  width: 100%;
  height: 50%;
  font-weight: bold;
  color: #23262d;
}
.my-comment{
  width: 100%;
  height: 50%;
  color: black;
}
</style>
